<template>
  <view class="my-container">
    <view class="head-box">
      <view class="head-bg" :style="'height:'+(120+statusBarHeight)+'px;'"></view>
      <view class="head-content" :style="'top:'+(36+statusBarHeight)+'px;'">
        <view class="my-refer flex-center-between">
          <view class="flex">
            <navigator url="/pagesMy/user/userInfo" hover-class="none">
              <view class="portrait">
                <image class="avatar" :src="userInfo.avatar" mode=""></image>
                <view class="compile flex-aj-center">
                  <image src="/static/img/my-edit.png" mode=""></image>
                </view>
              </view>
            </navigator>
            <view class="name-etc">
              <view class="flex-aj-center name-auth-box">
                <view class="name text-ellipsis">
                  {{userInfo.wxNickname}}
                </view>
                <view
                  class="authentication flex-aj-center"
                  :class="{ 'authentication-active' : isAuth }"
                  @click="handleAuthentication(userInfo.idCard)
"
                >

                  <image src="/static/img/my-rz.png" mode=""></image>
                  <text v-if="userInfo.idCard">已</text>
                  <text v-else>未</text>
                  认证
                </view>
              </view>
              <view class="flex-aj-center box2 e-msg-box" v-if="false">
                <view class="e-mail flex-a-center">
                  <view class="icon-vessel flex-aj-center">
                    <image src="/static/img/my-yx.png" mode=""></image>
                  </view>
                  我的邮箱
                </view>
                <view class="msg flex-a-center">
                  <view class="icon-vessel flex-aj-center">
                    <image class="msg-" src="/static/img/my-xx.png" mode=""></image>
                  </view>
                  我的消息
                </view>
              </view>
            </view>
          </view>
          <navigator url="/pagesMy/member" hover-class="none" v-if="false">
            <view class="member flex-aj-center">
              <image src="/static/img/my-hg.png" mode=""></image>
              我的会员
            </view>
          </navigator>
        </view>
        <view class="my-wallet flex-center-between" v-if="false">
          <view class="wallet" @click="handleClick">
            我的钱包
            <view>
              ￥<text>{{ userInfo.balance }}</text>
            </view>
          </view>
          <navigator url="/pagesMy/wallet?type=2">
            <view class="enter">
              进入钱包
            </view>
          </navigator>
        </view>
      </view>
    </view>
    <view class="my-list">
      <!-- 修改这个列表项，不使用 navigator -->
      <view v-for="(item,index) in myList" :key="index">
        <navigator v-if="item.name !== '邀请好友'" :url="item.url" hover-class="none">
          <view class="my-list-item flex-a-center">
            <view class="left flex-aj-center">
              <image :src="item.pic" mode=""></image>
            </view>
            <view class="right flex-center-between">
              {{item.name}}
              <back :isRight="true" :borderColor="'#999'" :padding="'12rpx 0 0'"></back>
            </view>
          </view>
        </navigator>
        <!-- 邀请好友单独处理 -->
        <button  open-type="share" v-else  class="my-list-item share-btn flex-a-center" >
          <view class="left flex-aj-center">
            <image :src="item.pic" mode=""></image>
          </view>
          <view class="right flex-center-between" >
            {{item.name}}
            <back :isRight="true" :borderColor="'#999'" :padding="'12rpx 0 0'"></back>
          </view>
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>

import { ref, onMounted,getCurrentInstance } from 'vue'
import { systemStore } from '@/stores/system'
import { useStore } from '@/stores/user'
// import { getInfo } from '@/api/login'
// import { getUserWalletInfo } from '@/api/user'
const SystemStore =systemStore()
const{userInfo}  = useStore()
// console.log('userInfo',userInfo)
let app = getApp()
const { proxy } = getCurrentInstance()
const statusBarHeight = ref("")
statusBarHeight.value = SystemStore.statusBarInfo.statusBarHeight + 10
let props = defineProps({
  statusBarHeight: {
    type: Number
  }
})
let myList = ref([
  {pic:'http://www.xvopen.com/xiaoV/img1/my5.png',name:'我的团体卡',url:'/pagesMy/user/groupCard'},
  {pic:'http://www.xvopen.com/xiaoV/img1/my5.png',name:'我的会员',url:'/pagesMy/user/membershipCard'},
  {pic:'http://www.xvopen.com/xiaoV/img1/my1.png',name:'收货地址',url:'/pagesMy/address'},
  {pic:'http://www.xvopen.com/xiaoV/img1/my5.png',name:'合作申请进度',url:'/pagesShop/franchiseStores/join_apply'},
  {pic:'http://www.xvopen.com/xiaoV/img1/my2.png',name:'收藏的店铺',url:'/pagesMy/user/collect_shop'},
  {pic:'http://www.xvopen.com/xiaoV/img1/my3.png',name:'我的优惠券',url:'/pagesMy/coupons'},
  {pic:'http://www.xvopen.com/xiaoV/img1/my6.png',name:'邀请好友',url:'/pagesMy/user/generate_poster'},
  {pic:'http://www.xvopen.com/xiaoV/img1/my8.png',name:'意见反馈',url:'/pagesMy/feedback'},
  {pic:'http://www.xvopen.com/xiaoV/img1/my9.png',name:'关于我们',url:'/pagesMy/about_us'}
])
let isAuth = ref(true)


async function GetUserInfo() {
  const res = await getInfo()
  userInfo.value = res.user
}


const initData = async () => {

}

const refresh = () => {
  initData()
}
const handleClick = () => {
  console.log('!!!')
  proxy.$checkLoginAndExecute(() => {
    console.log('用户已登录，执行操作')
    // 在这里执行你需要的操作
  })
}
const handleAuthentication =(flag) =>{
  if(!flag){
    uni.navigateTo({
      url: '/pagesMy/real_name_auth'
    })
  }

}
onMounted(() => {
  // initData()
})
defineExpose({
  refresh
})
</script>

<style scoped  lang="scss">
.my-container{
  font-size: 32rpx;
  color: #222222;
  padding-bottom: 100rpx;
}
.head-box{
  position: relative;
  font-size: 20rpx;
  .head-bg{
    width: 750rpx;
    background-image: url("");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
  }
  .head-content{
    position: absolute;
    left: 0;
    .my-refer{
      width: 686rpx;
      margin: 10rpx 32rpx 32rpx;
      .portrait{
        position: relative;
        margin-right: 16rpx;
        .avatar{
          width: 112rpx;
          height: 112rpx;
          background: #eee;
          border-radius: 50%;
        }
        .compile{
          width: 32rpx;
          height: 32rpx;
          position: absolute;
          bottom: 0;
          right: 8rpx;
          border-radius: 50%;
          background-color: rgba(0, 128, 255, 0.6);
          image{
            width: 16rpx;
            height: 20rpx;
          }
        }
      }
      .name-etc{
        .name-auth-box{
          margin-bottom: 14rpx ;
          .name{
            font-size: 48rpx;
            font-weight: bolder;
            margin-right: 12rpx;
            max-width: 250rpx;
          }
          .authentication{
            width: 94rpx;
            height: 32rpx;
            line-height: 32rpx;
            border-radius: 4rpx;
            background-color: #C9C9C9;
            color: #fff;
            image{
              width: 20rpx;
              height: 22rpx;
              margin-right: 2rpx;
            }
          }
          .authentication-active{
            background-color: #00CBFF;
            background-image: linear-gradient(90deg, #00CBFF 0%, #0080FF 100%);
          }
        }
        .e-msg-box{
          .e-mail,.msg{
            width: 124rpx;
            height: 32rpx;
            line-height: 32rpx;
            border-radius: 16rpx;
            background-color: #00DBDE;
            background-image: linear-gradient(90deg, #E2F7FF 0%, #CBF0FF 100%);
            color: #2775B1;
          }
          .e-mail .icon-vessel,.msg .icon-vessel{
            width: 32rpx;
            height: 32rpx;
            border-radius: 50%;
            margin-right: 4rpx;
          }
          .e-mail{
            margin-right: 16rpx;
            .icon-vessel{
              background-color: #88FFCA;
              background-image: linear-gradient(135deg, #88FFCA 0%, #12C27C 100%);
              image{
                width: 16rpx;
                height: 13rpx;
              }
            }
          }
          .msg{
            .icon-vessel{
              background-color: #00CBFF;
              background-image: linear-gradient(135deg, #00CBFF 0%, #0080FF 100%);
              image{
                width: 16rpx;
                height: 18rpx;
              }
            }
          }
        }

      }
      .member{
        width: 188rpx;
        height: 64rpx;
        border-radius: 32rpx;
        background-color: #FFE9DC;
        background-image: linear-gradient(135deg, #FFE9DC 0%, #F9A977 100%);
        font-size: 28rpx;
        font-weight: bold;
        color: #7E3E27;
        image{
          width: 40rpx;
          height: 35rpx;
          margin-right: 4rpx;
        }
      }
    }
    .my-wallet{
      width: 686rpx;
      height: 144rpx;
      margin: 32rpx 34rpx 0;
      padding : 24rpx 32rpx;
      background-color: #C1F7FF;
      background-image: linear-gradient(135deg, #C1F7FF 0%, #3F8BE2 100%);
      border-radius: 16rpx;
      color: #093F64;
      .wallet{
        font-size: 24rpx;
        view{
          font-size: 28rpx;
          margin-top: 10rpx;
          text{
            font-size: 48rpx;
            font-weight: bold;
          }
        }
      }
      .enter{
        width: 152rpx;
        height: 52rpx;
        line-height: 52rpx;
        text-align: center;
        border-radius: 8rpx;
        font-size: 28rpx;
        background-color: #D7E9F9;
      }
    }
  }
}
.my-list{
  margin: 0 0 0;
  padding: 45rpx 0 100rpx;
  border-radius: 40rpx 40rpx 16rpx 16rpx;
  background-color: #fff;
  .my-list-item{
    margin: 32rpx;
    font-size: 32rpx;

    // background-color: #00DBDE;
    image{
      width: 32rpx;
      height: 32rpx;
    }
    .left{
      width: 104rpx;
      padding-bottom: 24rpx;
      image{
        width: 52rpx;
        height: 52rpx;
        margin-right: 32rpx;
      }
    }
    .right{
      width: 646rpx;
      border-bottom: 0.5rpx solid rgba(198, 198, 198, 0.4);
      padding-bottom: 32rpx;
    }
  }

}
.my-list {
  margin: 0 0 0;
  padding: 45rpx 0 100rpx;
  border-radius: 40rpx 40rpx 16rpx 16rpx;
  background-color: #fff;

  .my-list-item {
    margin: 32rpx;
    font-size: 32rpx;

    image {
      width: 32rpx;
      height: 32rpx;
    }

    .left {
      width: 104rpx;
      padding-bottom: 24rpx;

      image {
        width: 56rpx;
        height: 56rpx;
      }
    }

    .right {
      width: 646rpx;
      border-bottom: 0.5rpx solid rgba(198, 198, 198, 0.4);
      padding-bottom: 32rpx;
    }
  }

  // 重置分享按钮样式，完全继承 my-list-item 样式
  .share-btn {
    width: 100%;
    margin: 0;
    //padding: 0;
    border: none;
    background: none !important;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    text-align: left;
    border-radius: 0;
    box-sizing: border-box;

    &::after {
      border: none;
    }

    &:active {
      background: none !important;
      opacity: 0.7;
    }
  }
}

</style>
